$(function () {
    let layer = layui.layer;
    //1.初始化文章分类列表
    //因为后面还要用所以封装成函数
    initArtCateList()
    function initArtCateList() {
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then((res) => {
            if (res.data.status !== 0) return layer.msg(res.data.message);
            let arr = [];
            let index = 0;
            res.data.data.forEach(ele => {
                index++;
                arr.push(
                    `
                    <tr>
                      <td>${index}</td>
                      <td>${ele.name}</td>
                      <td>${ele.alias}</td>
                      <td>
                        <button data-id='${ele.Id}' class="btn-edit layui-btn layui-btn-xs">编辑</button>
                        <button data-id='${ele.Id}' class="btn-del layui-btn layui-btn-xs layui-btn-danger">
                          删除
                        </button>
                      </td>
                    </tr>
                    `
                )
                $('tbody').empty().html(arr.join(''))
            })
        })
    }

    //2.点击添加,显示对话框
    let indexAdd = null;
    $('#btnAddCate').on('click', function () {
        indexAdd = layer.open({
            type: 1,
            title: '添加文章分类',
            area: ['500px', '300px'],
            content:
                `
                <form id="formAdd" class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input
                            type="text"
                            name="name"
                            required
                            lay-verify="required"
                            placeholder="请输入分类名称"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">分类别名</label>
                    <div class="layui-input-block">
                        <input
                            type="text"
                            name="alias"
                            required
                            lay-verify="required"
                            placeholder="请输入分类别名"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">
                            确认添加
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">
                            重置
                        </button>
                    </div>
                </div>
            </form>
            `
        });
    })

    //3.点击添加确认
    //form动态添加事件委托
    //form在layer里，父元素并不是iframe,要看控制台确定谁是父元素
    $('body').on('submit', '#formAdd', function (e) {
        e.preventDefault()
        axios({
            method: "POST",
            url: "/my/article/addcates",
            data: $(this).serialize()
        }).then(res => {
            //console.log(res.data);
            if (res.data.status !== 0) return layer.msg(res.data.message);
            layer.msg(res.data.message);
            layer.close(indexAdd)  //关闭弹窗
            initArtCateList()
        })
    })

    //4.点击编辑
    let indexEdit = null;
    let form = layui.form;
    $('tbody').on('click', '.btn-edit', function () {
        indexEdit = layer.open({
            type: 1,
            title: '修改文章分类',
            area: ['500px', '300px'],
            content:
                `
                <form id="formEdit" lay-filter='formEdit' class="layui-form">
                <input type="hidden" name="Id"/>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input
                            type="text"
                            name="name"
                            required
                            lay-verify="required"
                            placeholder="请输入分类名称"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">分类别名</label>
                    <div class="layui-input-block">
                        <input
                            type="text"
                            name="alias"
                            required
                            lay-verify="required"
                            placeholder="请输入分类别名"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">
                            确认修改
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">
                            重置
                        </button>
                    </div>
                </div>
            </form>
            `
        });
        let id = $(this).attr('data-id')
        axios({
            method: 'GET',
            //'/my/article/cates/:id'的id是一个动态参数，要从被编辑的那一列表格获取
            //给编辑按钮增加自定义属性,属性值为需要的id
            //写url时，要删掉id前面的：
            url: '/my/article/cates/' + id
        }).then(res => {
            if (res.data.status !== 0) return layer.msg(res.data.message);
            form.val('formEdit', res.data.data)
        })
    })

    //5.点击确认编辑
    //layui里面不需要添加回车确定事件，自带
    $('body').on('submit', '#formEdit', function (e) {
        e.preventDefault();
        axios({
            method: "POST",
            url: "/my/article/updatecate",
            //根据接口文档data请求体里有Id,所以新增隐藏域
            data: $(this).serialize()
        }).then(res => {
            //console.log(res.data);
            if (res.data.status !== 0) return layer.msg(res.data.message);
            layer.msg('修改成功！');
            layer.close(indexEdit)  //关闭弹窗
            initArtCateList()
        })


    })

    //6.点击删除
    $('tbody').on('click', '.btn-del', function () {
        let id = $(this).attr('data-id')
        layer.confirm('是否确认删除？', { icon: 3, title: '提示' }, function (index) {
            //console.log(this);
            //let id = $('.btn-del').attr('data-id')
            //console.log(id);
            //弹窗里获得的$('.btn-del')只能是第一个，获得的id,一直为1,
            axios({
                method: 'GET',
                url: '/my/article/deletecate/' + id
            }).then(res => {
                //console.log(res);
                if (res.data.status !== 0) return layer.msg(res.data.message);
                layer.msg("删除成功！")
                initArtCateList()
            })
            layer.close(index);
        });

    })

})